<!--我的消息-->
<template>
  <div id="notice" class="app-container  flex-row">
    <div class="common-sub-vertical-menu">
      <ul class="vertical-menu">
        <li :class="type==='notice'?'active':''" @click="handleChangeType('notice')">
          <i class="icon el-icon-message" />
          <span>通知公告</span>
        </li>
        <li :class="type==='system'?'active':''" @click="handleChangeType('system')">
          <i class="icon el-icon-postcard" />
          <span>系统消息</span>
        </li>
        <li :class="type==='feedback'?'active':''" @click="handleChangeType('feedback')">
          <i class="icon el-icon-postcard" />
          <span>意见反馈</span>
        </li>
      </ul>
    </div>
    <div class="flex-main conmmon-container-main">
      <component :is="componentName" :type="type" />
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import message from './message.vue'
import feedback from './feedback.vue'
export default {
  components: { message, feedback },

  data() {
    return {
      componentName: 'message'
    }
  },
  computed: {
    ...mapState({
      type: state => state['services/upms/system/UpmsNoticeService'].updateMyMsgType
    })
  },
  watch: {
    type: function(val) {
      this.analysisVal(val)
    }
  },

  created() {
    this.analysisVal(this.type)
  },
  destroyed() {
  },
  methods: {
    analysisVal(val) {
      if (val === 'notice' || val === 'system') {
        this.componentName = 'message'
      }
      if (val === 'feedback') {
        this.componentName = 'feedback'
      }
    },
    handleChangeType(type) {
      if (this.type === type) {
        return
      }
      if (type === 'notice' || type === 'system') {
        this.componentName = 'message'
      }
      if (type === 'feedback') {
        this.componentName = 'feedback'
      }

      this.$store.dispatch('updateMyMsgType', type)
    }
  }
}
</script>
  <style lang="scss">
  </style>

